<template>
  <div>
    <ul>
      <li>
        <el-button>44</el-button>
        <span>44</span>
        <el-input></el-input>
      </li>
    </ul>
    <div>====================================</div>
    <ul>
      <li class="box" v-for="(item,index) in arr" :key="index">
        <el-button>{{ item.value }}</el-button>
        <span>{{item.value}}</span>
        <el-input></el-input>
      </li>
    </ul>
    <button @click="arr.push({value:4,isActive:false})">add</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr:[],
      data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2',
            children: [{
             id: 11,
              label: '三级 3-2-1'
            }, {
              id: 12,
              label: '三级 3-2-2'
            }, {
              id: 13,
              label: '三级 3-2-3'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },



      // fileList:[],
      // dateArr: ["2016-05-02", "2016-05-04", "2016-05-05", "2016-05-07"],
      // arrLabel: [
      //   {
      //     label: "日期",
      //     value: "date"
      //   },
      //   {
      //     label: "中班",
      //     label2: "8:00~16:00",
      //     value: "name"
      //   },
      //   {
      //     label: "晚班",
      //     label2: "8:00~16:00",
      //     value: "address"
      //   },
      //   {
      //     label: "夜班",
      //     label2: "8:00~16:00",
      //     value: "sex"
      //   },
      //   {
      //     label: "夜夜班",
      //     label2: "8:00~16:00",
      //     value: "age"
      //   }
      // ],
      // // arrLabel: ["姓名", "地址"],
      // // arrTable: ["date","name", "address"],
      // tableData: [
      //   {
      //     date: "2016-05-04",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //     sex: "男"
      //   },
      //   {
      //     date: "2016-05-04",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1517 弄",
      //     age: "111"
      //   },
      //   {
      //     date: "2016-05-01",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1519 弄"
      //   },
      //   {
      //     date: "2016-05-03",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1516 弄"
      //   }
      // ],
      // options: [
      //   {
      //     value: "选项1",
      //     label: "黄金糕",
      //     id: "2"
      //   },
      //   {
      //     value: "选项2",
      //     label: "双皮奶",
      //     id: "3"
      //   },
      //   {
      //     value: "选项3",
      //     label: "蚵仔煎",
      //     id: "4"
      //   },
      //   {
      //     value: "选项4",
      //     label: "龙须面",
      //     id: "5"
      //   }
      // ],
      // value: "",
      // cascaderConfig: {
      //   label: "label",
      //   value: "id",
      //   children: "children"
      // },
      // data: [
      //   {
      //     value: "zhinan",
      //     label: "指南",
      //     id: 11,
      //     children: [
      //       {
      //         value: "shejiyuanze01",
      //         label: "设计原则",
      //         id: 55,
      //         children: [
      //           {
      //             value: "yizhi",
      //             label: "一致",
      //             id: 666
      //           },
      //           {
      //             value: "fankui",
      //             label: "全部",
      //             id: 777777
      //           }
      //         ]
      //       },
      //       {
      //         value: "daohang02",
      //         label: "导航",
      //         id: 73,
      //         children: [
      //           {
      //             value: "cexiangdaohang",
      //             label: "侧向导航",
      //             id: 223
      //           },
      //           {
      //             value: "dingbudaohang",
      //             label: "顶部导航",
      //             id: 13333
      //           }
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     value: "ziyuan",
      //     label: "资源",
      //     children: [
      //       {
      //         value: "axure",
      //         label: "Axure Components",
      //         id: 231
      //       },
      //       {
      //         value: "sketch",
      //         label: "Sketch Templates",
      //         id: 1222
      //       },
      //       {
      //         value: "jiaohu",
      //         label: "组件交互文档",
      //         id: 11111
      //       }
      //     ]
      //   }
      // ],
      // selectedOptions: [],
      // data: [
      //   {
      //     date: "5月1日",
      //     name: "张三",
      //     sex: "男"
      //   },
      //   {
      //     date: "5月2日",
      //     name: "李四",
      //     sex: "男"
      //   }
      // ]
    };
  },
  methods: {
    handleDragStart(node, ev) {
        console.log('drag start', node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        console.log('tree drag enter: ', dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        console.log('tree drag leave: ', dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        console.log('tree drag over: ', dropNode.label);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log('tree drop: ', dropNode.label, dropType);
      },
      allowDrop(draggingNode, dropNode, type) {
        if (dropNode.data.label === '二级 3-1') {
          return type !== 'inner';
        } else {
          return true;
        }
      },
      allowDrag(draggingNode) {
        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
      }
    // handleRemove(file, fileList) {
    //     console.log(file, fileList);
    //   },
    //   handlePreview(file) {
    //     console.log(file);
    //   },
    //   handleExceed(files, fileList) {
    //     this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    //   },
    //   beforeRemove(file, fileList) {
    //     return this.$confirm(`确定移除 ${ file.name }？`);
    //   },
    // handleChange() {
    //   console.log(this.selectedOptions, 112233);
    // },
    // selectA() {
    //   console.log(this.value, 222);
    // },

    // getBlob(url) {
    //   return new Promise(resolve => {
    //     const xhr = new XMLHttpRequest();

    //     xhr.open("GET", url, true);
    //     xhr.responseType = "blob";
    //     xhr.onload = () => {
    //       if (xhr.status === 200) {
    //         resolve(xhr.response);
    //       }
    //     };

    //     xhr.send();
    //   });
    // },
    // saveAs(blob, filename) {
    //   if (window.navigator.msSaveOrOpenBlob) {
    //     navigator.msSaveBlob(blob, filename);
    //   } else {
    //     const link = document.createElement("a");
    //     const body = document.querySelector("body");

    //     link.href = window.URL.createObjectURL(blob);
    //     link.download = filename;

    //     // fix Firefox
    //     link.style.display = "none";
    //     body.appendChild(link);

    //     link.click();
    //     body.removeChild(link);

    //     window.URL.revokeObjectURL(link.href);
    //   }
    // },
    // download(url, filename) {
    //   let that = this;
    //   that.getBlob(url).then(blob => {
    //     that.saveAs(blob, filename);
    //   });
    // },
    // d() {
    //   this.download(
    //     "/tes/course/" +
    //       this.$localstorage.getLocalStorage("setCourseId") +
    //       "/businessType/1/question-repository/model",
    //     "hehe.xls"
    //   );
    // }
  }
};
</script>
<style scoped>
.box{
  color:red;
}
.box span{
  color:blue;
}
.box.active span{
  background:Red;
  color:green;
}
.el-button{
  background:Red;
}
.el-button:hover{
  background:blue;
}
</style>
